import React, {useState, useEffect} from 'react';
import { Table } from 'antd';
import { Link } from 'react-router-dom';
import "./home.scss"
import axios from 'axios';

export default function Home () {
  const [data,setdata ] = useState([])
  const [index,setIndex ] = useState(0)

  const columns = [
    {
      title: '地区',
      dataIndex: 'area'
    },
    {
      title: 'JS',
      dataIndex: 'js'
    },
    {
      title: 'JAVA',
      dataIndex: 'java'
    },
    {
      title: 'PHP',
      dataIndex: 'php'
    },
    {
      title: 'Python',
      dataIndex: 'python'
    },
    {
      title: 'Node',
      dataIndex: 'node'
    },
  ]
  // const data =[]
  // 接口调用每次更新的时候会调用一次
  useEffect(() => {
    axios.get('/data.json').then((response) => {
      const res = response.data
      if (res.code === 0) {
        setdata(res.data)
      }
     })
   },[])
  return <div className='home'>
    <h1>语言大数据报告</h1>
    <div className='wrap'>
      <div className='nav' >
        <a className={index == 0 ? "checked" : ""} onClick={()=>{setIndex(0)}}>语言动态</a>
        <a className={index == 1 ? "checked" : ""} onClick={()=>{setIndex(1)}}>语言地图</a>
        <a className={index == 2 ? "checked" : ""} onClick={()=>{setIndex(2)}}>语言热搜</a>
        <a className={index == 3 ? "checked" : ""} onClick={()=>{setIndex(3)}}>语言播报</a>
      </div>
      <p>数据纯属虚构</p>
      <Table
        bordered
        pagination={false}
        columns={columns}
        dataSource={data}
      ></Table>
      <Link to="/" className='nav-link'>回首页</Link>
    </div>
  </div>
 }
//  export default withRouter(Home)
